@extends('admin.common.admin')
@section('cnt')
    {{--面包屑导航--}}
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i>文章管理
        <span class="c-gray en">&gt;</span> 文章列表
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>
    <div class="page-container">
        @include('admin.common.msg')
        <div class="text-c">
            日期范围：
            <input type="text" onfocus="WdatePicker()" id="datemin" class="input-text Wdate" style="width:120px;">
            <input type="text" onfocus="WdatePicker()" id="datemax" class="input-text Wdate" style="width:120px;">
            <input type="text" class="input-text" style="width:250px" placeholder="文章标题" id="title">
            <button type="button" class="btn btn-success" id="searchBtn"><i class="Hui-iconfont">&#xe665;</i> 搜标题
            </button>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l">
                {!! $article->addBtn('admin.article.create','添加文章') !!}
            </span>
        </div>
        <table class="table table-border table-bordered table-bg">
            <thead>
            <tr>
                <th scope="col" colspan="12">文章列表</th>
            </tr>
            <tr class="text-c">
                <th width="40">ID</th>
                <th width="160">标题</th>
                <th width="60">作者</th>
                <th width="60">图片</th>
                <th width="60">添加时间</th>
                <th width="30">点击量</th>
                <th width="30">状态</th>
                <th width="100">操作</th>
            </tr>
            </thead>
        </table>
    </div>
@endsection
@section('js')
    {{--引入datatables插件前，需引入jquery--}}
    <script src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script>
        //datatables实例化
        const datatable = $('.table-bg').DataTable({
            //是否显示搜索
            searching: false,
            //加载进程显示
            processing: true,
            //每页显示的记录数
            lengthMenu: [2, 5, 10, 20],
            //默认id字段降序
            order: [[0, 'desc']],
            //指定字段不排序
            columnDefs: [
                //索引从0开始
                {targets: [3, 6, 7], orderable: false}
            ],
            //开启服务端分页
            serverSide: true,
            //请求设置
            ajax: {
                //请求地址
                url: "{{route('admin.article.index')}}",
                //请求方式
                type: 'GET',
                // 额外参数
                data: function (ret) {
                    ret.title = $('#title').val();
                    ret.datemin = $('#datemin').val();
                    ret.datemax = $('#datemax').val();
                }
            },
            columns: [
                {data: 'id', className: 'text-c'},
                {data: 'title'},
                {data: 'author', className: 'text-c'},
                {data: 'pic', className: 'text-c'},
                {data: 'created_at', className: 'text-c'},
                {data: 'click', className: 'text-c'},
                {data: 'deleted_at', className: 'text-c'},
                //如果返回字段中没有此处指定的名称，就须有defaultContent
                {data: 'action', defaultContent: '操作', className: 'text-c'}
            ],
            //回调函数处理数据源中的数据，dom操作
            //tr 当前行的dom对象
            //data 当前行的数据源
            createdRow: function (tr, data) {
                //把dom对象转为jquery对象
                //访问量连接
                $(tr).find('td:eq(5)').html(`<a href="{{route('admin.article.count')}}?art_id=${data.id}">${data.click}</a>`);
                //第三列 图片显示
                $(tr).find('td:eq(3)').html(`<img src="${data.pic}" style="width:80px" />`);
                //第5列  状态显示
                var html = '<span class="label label-success radius">启用</span>';
                if (data.deleted_at) {
                    html = '<span class="label label-danger radius">禁用</span>';
                }
                $(tr).find('td:eq(6)').html(html);
            }

        });
        //搜索
        $('#searchBtn').click(function () {
            //datatable插件执行ajax
            datatable.ajax.reload();
        });
        //删除
        $('.table').on('click', '.delBtn', function () {
            let url = $(this).attr('href');
            $.ajax({
                url,
                type: 'delete',
                data: {
                    _token: "{{csrf_token()}}"
                }
            }).then(ret => {
                layer.msg(ret.msg, {icon: 1, time: 2000}, () => {
                    datatable.ajax.reload();
                })
            });

            return false;
        });
    </script>
@endsection
